<template>
  <view class="container">
    <view class="form">
      <!-- 原手机号 -->
      <view class="form-item">
        <text class="label">原手机号</text>
        <text class="value">{{userInfo.phone}}</text>
      </view>
      
      <!-- 新手机号 -->
      <view class="form-item">
        <text class="label">新手机号</text>
        <input 
          type="number" 
          v-model="form.newPhone"
          placeholder="请输入新手机号"
          maxlength="11"
        />
      </view>
      
      <!-- 验证码 -->
      <view class="form-item">
        <text class="label">验证码</text>
        <input 
          type="number" 
          v-model="form.code"
          placeholder="请输入验证码"
          maxlength="6"
        />
        <text 
          class="code-btn" 
          :class="{ disabled: counting }"
          @tap="sendCode"
        >
          {{counting ? `${count}s后重发` : '获取验证码'}}
        </text>
      </view>
    </view>
    
    <!-- 提交按钮 -->
    <view class="submit-btn" @tap="handleSubmit">
      <text>确认修改</text>
    </view>
  </view>
</template>

<script>
import { userApi } from '@/api/index'
import { showToast } from '@/utils/common'

export default {
  data() {
    return {
      userInfo: {
        phone: ''
      },
      form: {
        newPhone: '',
        code: ''
      },
      counting: false,
      count: 60,
      timer: null
    }
  },
  onLoad() {
    this.getUserInfo()
  },
  onUnload() {
    if (this.timer) {
      clearInterval(this.timer)
    }
  },
  methods: {
    // 获取用户信息
    async getUserInfo() {
      try {
        const res = await userApi.getUserInfo()
        this.userInfo = res
      } catch (error) {
        showToast('用户信息加载失败')
      }
    },
    
    // 表单验证
    validate() {
      if (!this.form.newPhone) {
        showToast('请输入新手机号')
        return false
      }
      if (!/^1[3-9]\d{9}$/.test(this.form.newPhone)) {
        showToast('请输入正确的手机号')
        return false
      }
      if (this.form.newPhone === this.userInfo.phone) {
        showToast('新手机号不能与原手机号相同')
        return false
      }
      if (!this.form.code) {
        showToast('请输入验证码')
        return false
      }
      if (!/^\d{6}$/.test(this.form.code)) {
        showToast('请输入6位数字验证码')
        return false
      }
      return true
    },
    
    // 发送验证码
    async sendCode() {
      if (this.counting) return
      
      if (!this.form.newPhone) {
        showToast('请输入新手机号')
        return
      }
      if (!/^1[3-9]\d{9}$/.test(this.form.newPhone)) {
        showToast('请输入正确的手机号')
        return
      }
      if (this.form.newPhone === this.userInfo.phone) {
        showToast('新手机号不能与原手机号相同')
        return
      }
      
      try {
        await userApi.sendPhoneCode(this.form.newPhone)
        showToast('验证码已发送')
        this.startCount()
      } catch (error) {
        showToast('验证码发送失败')
      }
    },
    
    // 开始倒计时
    startCount() {
      this.counting = true
      this.count = 60
      this.timer = setInterval(() => {
        if (this.count > 0) {
          this.count--
        } else {
          this.counting = false
          clearInterval(this.timer)
        }
      }, 1000)
    },
    
    // 提交表单
    async handleSubmit() {
      if (!this.validate()) return
      
      try {
        await userApi.updatePhone({
          newPhone: this.form.newPhone,
          code: this.form.code
        })
        showToast('手机号修改成功')
        setTimeout(() => {
          uni.navigateBack()
        }, 1500)
      } catch (error) {
        showToast('手机号修改失败')
      }
    }
  }
}
</script>

<style lang="scss">
.container {
  min-height: 100vh;
  background: #f5f5f5;
  padding: 20rpx;
}

.form {
  background: #fff;
  border-radius: 12rpx;
  padding: 0 30rpx;
  
  .form-item {
    display: flex;
    align-items: center;
    height: 100rpx;
    border-bottom: 1rpx solid #f5f5f5;
    
    &:last-child {
      border-bottom: none;
    }
    
    .label {
      width: 140rpx;
      font-size: 28rpx;
      color: #333;
    }
    
    input {
      flex: 1;
      font-size: 28rpx;
      color: #333;
    }
    
    .value {
      flex: 1;
      font-size: 28rpx;
      color: #333;
    }
    
    .code-btn {
      width: 200rpx;
      height: 60rpx;
      line-height: 60rpx;
      text-align: center;
      background: #ff0000;
      color: #fff;
      border-radius: 30rpx;
      font-size: 24rpx;
      
      &.disabled {
        background: #ccc;
      }
    }
  }
}

.submit-btn {
  margin-top: 40rpx;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  background: #ff0000;
  color: #fff;
  border-radius: 40rpx;
  font-size: 28rpx;
}
</style> 